<template>
    <div class="container">
        <!-- 头部导航start -->
        <div class="header">
            <!-- 面包屑 -->
            <div class="breadCrumb">
                <el-steps :active="2" simple>
                    <el-step title="选择" icon="el-icon-location"></el-step>
                    <el-step title="推荐路线" icon="el-icon-upload"></el-step>
                </el-steps>
            </div>

            <!-- 用户区 -->
            <div class="user" @click="toHome">
                <img class="userAvatar" src="../../assets/avatar.jpg" alt="">
            </div>
        </div>
        <!-- 头部导航end -->


        <!-- 内容区start -->
        <div class="content">
            <router-view></router-view>
        </div>
        <!-- 内容区end -->
    </div>
</template>

<script>
export default {
    name: 'Index',

    data() {
        return {
            
        };
    },

    created() {
        
    },

    methods: {
        toHome(){  
            this.$router.push({ 
                name:'home'
            })
        },
    },
};
</script>

<style lang="less" scoped>
.container{ 
    width:87.5rem;
    height: 100%;
    margin: 0 auto;
    position: relative;
    .header{
        width: 100%;
        height: 2.5rem;
        // background-color: rgb(245,247,250);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .breadCrumb{ 
            width: 15.625rem;
        }
        .user{
            height: 1.75rem;
            padding-right: 1.875rem;
            .userAvatar{ 
                width: 1.75rem;
                height: 1.75rem;
                border-radius: 100%;
                overflow: hidden;
                cursor: pointer;
            }
        }
    }

    .content{ 
        width:100%;
        height: 100%;
    }

}
</style>